<template>
  <div class="zjb_xue">
    <!-- 学科布局开始 -->
    <div class="zjb_hue_head">
      <span @click="zjb_xue_go">&lt;</span>
      <span>学科</span>
      <span @click="zjb_xue_bao">保存</span>
    </div>
    <ul>
      <li v-for="(item,key) in zjb_val_id" :key="key">
        <input type="checkbox" v-model="item.done" @change="save()"/>
        <p>{{item.name}}</p>
      </li>
    </ul>
    <!-- 学科布局结束 -->
    <!-- {{zjb_val_id}} -->
  </div>
</template>

<script>
export default {
  name: "Xue",
  data() {
    return {
      xue: [],
      zjb_xue_che: [],
      zjb_val_id: [],
      arr: []
    };
  },
  mounted() {//--->最早操作dom元素大钩子
   var token=this.$store.state.User.token
    this.axios
      .get("https://test.365msmk.com/api/app/module/attribute/1?", {
        headers: { Authorization: "Bearer " + token }
      })
      .then(ret => {
        console.log(ret);
        this.xue = ret.data.data;
        for (var i in this.xue[1].value) {
          var obj = {
            id: this.xue[1].value[i].id,
            name: this.xue[1].value[i].name,
            done: false
          };
          this.zjb_val_id.push(obj);
        }
      });
  },
  methods: {
    save(){

    },
    zjb_xue_go() {
      //--->点击返回上一页
      this.$router.go(-1);
    },
    zjb_xue_bao() {
      //-->点击保存，写入数据
      for (var i in this.zjb_val_id) {
        // var a = this.xue[1].value[i].id;
        // console.log(a);
        // this.zjb_value_id.push(a);
        var obj={'attr_id': 2,'attr_val_id': this.zjb_val_id[i].id}
        if(this.zjb_val_id[i].done){
            var index=this.arr.findIndex((v,i,arr)=>{
                return v.attr_val_id==obj.attr_val_id
            })
            if(index==-1){
                this.arr.push(obj)
            }
           
        }
      }
      var token=this.$store.state.User.token
        this.axios
          .put(
            "https://test.365msmk.com/api/app/user",
            {
              user_attr: JSON.stringify(this.arr)   
            },
            {
              headers: {
                Authorization: "Bearer " + token
              }
            }
          )
          .then(ret => {
           if(ret.data.code==200){

                this.$router.go(-1);
           }
          });
      }
    }
  
};
</script>

<style lang="scss" scoped>
.zjb_hue_head{
  height: .6rem;
  width: 100%;
  line-height: .6rem;
  background: #ccc;
  &>span{
    margin-left: .4rem;
    margin-right: 1.8rem;
    font-size: .24rem;
  }
  &>span:nth-child(3){
    margin-right: 0;
  }
 
}
 ul{

    li{
      height: .6rem;
      width: 100%;
      border-bottom: 1px solid #000;
      line-height: .6rem;
      font-size: .24rem;
      padding-left: .4rem;
      display: flex;
      &>input{
        width: .4rem;
        height: .4rem;
        margin-top: .1rem;
        margin-right: .4rem;
      }
    }
  }
</style>